<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>115_解构赋值</title>
		<script>
			/* 解构赋值
			
			 */
			const arr = ["孙悟空", "猪八戒", "沙和尚"]
			let a, b, c;
			[a, b, c] = arr; //这就是结构赋值；把arr中的元素分别赋值给a,b,c
			console.log(a, b, c); //孙悟空 猪八戒 沙和尚

			let [d, e, f, g] = arr //这是声明同时解构
			console.log(d, e, f, g); //g会赋值为undefined

			let [i, j, k, l] = ["唐僧", "蜘蛛精", "玉兔精", "白骨精"];
			/* 
				前面的分号是告诉解析器这一行是一个独立的语句。防止解析错误。
				上一句l已经赋值为"白骨精"，但下面再结构时l仍然会赋值为undefined
			 */
			//;[i, j, k, l] = [1, 2, 3]
			//;[i = 10, j = 12, k, l = 20] = [1, 2, 3];//给设置默认值，如果结构没有值会使用默认值。
			//如果结构时l没有值会把上一次l的值赋给当前的l。
			[i, j, k, l = l] = [1, 2, 3]; //1 2 3 '白骨精'
			console.log(i, j, k, l);

			//let [n1, n2] = [1, 2, 3]; //n1=1,n2=2,多余的会舍弃。
			let [n1, n2, ...n3] = [1, 2, 3, 5, "哈哈"];
			//解构数组时，可以使用...来设置获取多余的元素，多余的元素会当做一个数组赋值给n3
			console.log(n1, n2, n3); //1 2  [3, 5, '哈哈']

			function fn() {
				return ["二郎神", "猪八戒"]
			}
			let [name1, name2] = fn();
			console.log(name1, name2); //将函数执行结果进行结构赋值

			//// 可以通过解构赋值来快速交换两个变量的值
			let a1 = 10;
			let a2 = 20;

			//数值交换
			//let temp = a1;
			//a1 = a2;
			//a2 = temp;

			//解构赋值来快速交换两个变量
			[a1, a2] = [a2, a1] //左边的数组表示变量，右边的表示是值[20,10]
			console.log(a1, a2);

			/* 
			数组中可以存储任意类型的数据，也可以存数组，
				如果一个数组中的元素还是数组，则这个数组我们就称为是二维数组
			 */
			const arr3 = [
				["孙悟空", 18, "男"],
				["猪八戒", 28, " 男 "]
			]
			//遍历二维数组
			for (let p of arr3) {
				for (let v of p) {
					console.log(v);
				}
			}

			//第一个一维数组分别结构给name,age,gender
			//第二个一维数组结构给obj
			let [ [name, age, gender], obj ] = arr3
			console.log(name, age, gender); //孙悟空 18 男
			console.log(obj);//['猪八戒', 28, ' 男 ']
		</script>
	</head>
	<body>
	</body>
</html>